<!-- 客流指标 -->
<template>
    <div class="wrapper">
        <div class="title-banner">
            <div>
                <img src="/src/assets/uiResources/网格员.png" alt="" />
                <span class="title">线路实时客流量</span>
            </div>
            <div>
                <span class="mount">5634</span>
                <span class="unit">/小时</span>
            </div>
        </div>
        <div class="chart-area">
            <div class="rate-list">
                <i v-for="item in [1, 2, 3, 4]" :class="['iconfont', `metro-NO-${item}`, `rand-${item}`]"></i>
            </div>
            <div class="chart-wrapper">
                <div id="guests_chart" width="100%" height="100%"></div>
            </div>
            <div class="data-list">
                <p>{{ dataSource[0].value }}</p>
                <p>{{ dataSource[1].value }}</p>
                <p>{{ dataSource[2].value }}</p>
                <p>{{ dataSource[3].value }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

const dataSource = [
    {
        name: "一号线",
        value: 1300,
    },
    {
        name: "二号线",
        value: 1100,
    },
    {
        name: "四号线",
        value: 1000,
    },
    {
        name: "七号线",
        value: 600,
    },
];

onMounted(async () => {
    initChart();
});
const guestsRateOpts = (dataSource) => {
    let salvProName = dataSource.map((item) => item.name);
    let salvProValue = dataSource.map((item) => item.value);
    let salvProMax = []; //背景按最大值
    for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(1400);
    }

    const getSymbolData = (data) => {
        let arr = [];
        for (let i = 0; i < data.length; i++) {
            arr.push({
                value: data[i],
                symbolPosition: "end",
            });
        }
        return arr;
    };

    const option = {
        backgroundColor: "rgba(0, 0, 0, 0)",
        grid: {
            left: "18%",
            right: "0%",
            bottom: "-2%",
            top: "0%",

        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "none",
            },
            formatter: function (params) {
                return params[0].name + " : " + params[0].value;
            },
        },
        xAxis: {
            show: false,
            type: "value",
        },
        yAxis: [
            {
                type: "category",
                inverse: true,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#C4F1FF",
                    },
                    rich: {
                        a: {
                            color: "#C4F1FF",
                            fontWeight: "800",
                            fontSize: 12,
                        },
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: salvProName,
            },
            {
                type: "category",
                inverse: true,
                axisTick: "none",
                axisLine: "none",
                show: true,
                axisLabel: {
                    textStyle: {
                        color: "#C4F1FF",
                        // fontSize: '12',
                        fontWeight: "800",
                    },
                },
                data: salvProValue,
            },
        ],
        series: [
            {
                name: "值",
                type: "bar",
                zlevel: 1,
                itemStyle: {
                    normal: {
                        barBorderRadius: 30,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: "rgb(10, 116, 255,1)",
                            },
                            {
                                offset: 1,
                                color: "rgb(127,237,241,1)",
                            },
                        ]),
                    },
                },
                z: 2,
                barWidth: 6,
                data: salvProValue,
            },
            {
                name: "XXX",
                type: "pictorialBar",
                symbol:
                    "image://",
                symbolSize: [40, 40],
                symbolOffset: [20, 0],
                z: 10086,
                itemStyle: {
                    normal: {
                        color: "#0A74FF",
                    },
                },
                data: getSymbolData(salvProValue),
            },
            {
                name: "背景",
                type: "bar",
                barWidth: 6,
                barGap: "-100%",
                data: salvProMax,
                itemStyle: {
                    normal: {
                        color: "rgba(127,237,241,.4)",
                        barBorderRadius: 30,
                        // backgroundColor:'#091C24'
                        // borderColor:'#00D1F0'
                    },
                },
                z: 1,
            },
        ],
    };
    return option;
};

const initChart = () => {
    const myChart = echarts.init(document.getElementById("guests_chart"));
    const options = guestsRateOpts(dataSource);
    myChart.setOption(options);
};
</script>
<style scoped lang="scss">
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 5px;
}

.title-banner {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: url("/assets/uiResources/圆角矩形.png");
    background-size: 100% 100%;
    padding: 0 20px;
}

.title-banner img {
    width: 40px;
    height: 40px;
}

.title {
    color: #fff;
    font-size: 16px;
    margin-left: 20px;
}

.mount {
    font-size: 20px;
    color: #4faccb;
    font-weight: bold;
}

.unit {
    font-size: 12px;
    color: #90a9c5;
}

.chart-area {
    width: 100%;
    height: 100%;
    display: flex;
}

.chart-wrapper {
    display: flex;
    flex: 1;

    #guests_chart {
        width: 370px;
        height: 200px;
        margin-top: 5px;

        >div {
            height: 200px;
        }
    }
}

.data-list {
    margin-top: -7px;
    margin-right: 25px;

    p {
        font-size: 17px;
        color: #70acf2;
        margin-top: 31px;
    }
}

.rate-list {
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.rate-list>i {
    font-size: 17px;
}

.rand-1 {
    color: #ffd31a;
}

.rand-2 {
    color: #dadada;
}

.rand-3 {
    color: #ffa70b;
}

.rand-4 {
    color: #1b9017;
}
</style>